<template>
	<view class="content">
		<view class="item" style="background-color: #00aaff;color: #FFFFFF;" >
			<u-row gutter="16" >
				<u-col  span="3" text-align="center">
					<view class="demo-layout ">报警类别</view>
				</u-col>
				<u-col span="2">
					<view class="mt" >状态</view>
				</u-col>
				<u-col span="4" text-align="center">
					<view class="mt">时间</view>
				</u-col>
				<u-col span="3" text-align="center">
					<view class="mt">操作</view>
				</u-col>
			</u-row>
		</view>
		<view class="item" v-for="(item, index) in historylist" :key="index" >
			<u-row gutter="16" >
				<u-col  span="3" text-align="center">
					<view class="demo-layout ">{{item.caseType}}</view>
					<view class="demo-layout ">{{item.studentName}}</view>
				</u-col>
				<u-col span="2">
					<view class="mt" >{{item.caseStatus}}</view>
				</u-col>
				<u-col span="4" text-align="center">
					<view class="mt">{{item.caseFirstTime}}</view>
				</u-col>
				<u-col span="3" text-align="center">
					<u-button class="mt" @click="navigate('/pages/callpolice/update',item.caseId,item.caseStatus)">详情</u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historylist: [{}]
			}
		},
		onLoad() {
				this.$u.api.getcasehistory({
					studentId:getApp().globalData.studentId
				}).then(res => {
					this.historylist=res.rows;
					console.log(this.historylist);
				})
		},
		methods: {
			navigate(path,caseId,caseStatus){
				uni.navigateTo({
				    url: path+'?caseId=' +caseId +'&caseStatus=' + caseStatus
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		font-size: 31upx;
	}
	.item {
		margin-top: 20upx;
		border-bottom:1upx solid #000000 ;
		padding: 20upx;
	}
	.demo-layout{
		
	}
	.flex{
		display:flex;
		align-items:center
	}
	.mt{
		margin-top:10upx;
	}


</style>
